<template>
	<view class="cus-gradient h-[300rpx]">
		<view class="flex flex-col items-center justify-center">
			<view class="flex justify-center">
				<text class="text-[36rpx] mt-20 text-[#ffffff] font-extrabold">{{$lang('QMS管理系统')}}</text>
			</view>
			<view class="flex justify-center">
				<text class="text-[24rpx] m-5 text-[#ffffff]">{{$lang('品质保证')}}</text>
				<text class="text-[24rpx] m-5 text-[#ffffff]">{{$lang('安全可靠')}}</text>
				<text class="text-[24rpx] m-5 text-[#ffffff]">{{$lang('快速响应')}}</text>
			</view>
		</view>
		<comp-heardSearch></comp-heardSearch>
		<!-- 宫格组件 -->
		<uni-section class="mt-1 cus-gradient-sub" :title="$lang('快捷菜单')" type="line"></uni-section>
		<view class="m-5  border-solid  border-2 border-blue-300 shadow-lg rounded-10">
			<view v-if="commonRouters && commonRouters.length > 0" class="m-1 grid col-4">
				<view v-for="item in commonRouters" :key="item"
					class="px-4 py-10 flex  flex-col items-center text-center view-hover">
					<view @click="menuTab(item.path)" @longpress="longpress(item)">
						<view :class="`iconfont icon-${item.icon} text-3xl`"></view>
						<view class="text-xs ">{{ item.titleKey ? $t(item.titleKey) : item.menuTitle }}</view>
					</view>
				</view>
			</view>
			<view class="flex justify-center items-center min-h-100 text-[#999] text-24" v-else>
				<text>{{$lang('请通过搜索添加')}}</text>
			</view>
		</view>
		<uni-popup ref="popupDel" background-color="#fff">
			<view class="flex justify-center items-center" @click="removeRoute">
				<uni-icons type="trash" size="30" color="red"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { reactive } from '@vue/runtime-core';
	import usePermissionStore from '@/store/modules/permission'
	import storage from '@/utils/storage.js'
	const {
		proxy
	} = getCurrentInstance()
	const popupDel=ref('popupDel')
	const delItem=ref(null)
	const commonRouters = computed(() => usePermissionStore().commonlyUsedRoutes)

	function menuTab(e) {
		proxy.$tab.navigateTo(e.indexOf('/') == 0 ? e : `/${e}`);
	}

	function removeRoute() {
		usePermissionStore().removeCommonlyUsedRoutes(delItem.value)
		popupDel.value.close()
	}
	function longpress(item){
		popupDel.value.open('bottom')
		delItem.value=item
	}

	function changeGrid(e) {
		proxy.$modal.showToast('模块建设中~')
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	.cus-gradient {
		/* 自定义方向和颜色 */
		background-image: linear-gradient(to bottom, #4791ff, #c1d4ff);
	}

	.cus-gradient-sub {
		/* 自定义方向和颜色 */
		background-image: linear-gradient(to bottom, #c1d4ff, #ffffff);
	}
	.view-hover{
		@apply active:bg-blue-500 active:rounded-[5px] active:text-white;
		transition: all 0.3s ease;
	}
</style>